<template>
	<view class="case-manage-container">
		<!-- 顶部操作栏 -->
		<view class="action-header">
			<view class="page-title">案例管理</view>
			<button class="add-btn" @click="goToAddCase">
				<text class="add-icon">+</text>
				<text class="add-text">新增案例</text>
			</button>
		</view>
		
		<!-- 筛选条件 -->
		<view class="filter-bar">
			<view class="filter-title">状态筛选：</view>
			<view class="filter-options">
				<view 
					class="filter-option" 
					:class="{ 'active': statusFilter === 'all' }"
					@click="setStatusFilter('all')"
				>
					全部
				</view>
				<view 
					class="filter-option" 
					:class="{ 'active': statusFilter === 'online' }"
					@click="setStatusFilter('online')"
				>
					上线
				</view>
				<view 
					class="filter-option" 
					:class="{ 'active': statusFilter === 'offline' }"
					@click="setStatusFilter('offline')"
				>
					下线
				</view>
			</view>
		</view>
		
		<!-- 案例列表 -->
		<view class="case-grid">
			<view class="case-card" v-for="(item, index) in caseList" :key="item.id" @click="viewCaseDetail(item.id)">
				<view class="case-image-container">
					<image :src="item.imageList && item.imageList.length > 0 ? item.imageList[0] : '/static/case-placeholder.png'" 
						class="case-image" mode="aspectFill"></image>
					<view class="case-price">¥{{ formatPrice(item.price) }}</view>
					<view class="case-status" :class="item.status === 'online' ? 'status-online' : 'status-offline'">
						{{ item.status === 'online' ? '上线' : '下线' }}
					</view>
				</view>
				<view class="case-content">
					<view class="case-title">{{ item.title }}</view>
					<view class="case-intro">{{ item.introduce }}</view>
					<view class="case-footer">
						<view class="case-time">{{ formatDate(item.createdTime) }}</view>
						<view class="case-actions">
							<view class="action-btn status-btn" @click.stop="toggleStatus(item.id, item.status)">
								{{ item.status === 'online' ? '下线' : '上线' }}
							</view>
							<view class="action-btn edit-btn" @click.stop="editCase(item.id)">编辑</view>
							<view class="action-btn delete-btn" @click.stop="confirmDelete(item.id)">删除</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="caseList.length === 0">
				<text class="empty-icon">🖼️</text>
				<text class="empty-text">暂无案例数据</text>
				<button class="empty-add-btn" @click="goToAddCase">添加第一个案例</button>
			</view>
		</view>
		
		<!-- 分页控件 -->
		<view class="pagination" v-if="caseList.length > 0">
			<view class="page-btn" :class="{ disabled: currentPage <= 1 }" @click="prevPage">
				<text class="page-arrow">←</text>
			</view>
			<view class="page-number">{{ currentPage }} / {{ totalPages }}</view>
			<view class="page-btn" :class="{ disabled: currentPage >= totalPages }" @click="nextPage">
				<text class="page-arrow">→</text>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-state" v-if="isLoading">
			<view class="loading-spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import request from '@/utils/request'

// 数据状态
const caseList = ref([])
const currentPage = ref(1)
const pageSize = ref(8)
const totalCases = ref(0)
const totalPages = computed(() => Math.ceil(totalCases.value / pageSize.value))
const isLoading = ref(false)
const statusFilter = ref('all') // 状态筛选：all, online, offline

// 监听状态筛选变化
watch(statusFilter, () => {
	currentPage.value = 1 // 重置到第一页
	fetchCaseList()
})

// 设置状态筛选
const setStatusFilter = (status) => {
	statusFilter.value = status
}

// 获取案例列表
const fetchCaseList = async () => {
	isLoading.value = true
	try {
		const params = {
			pageNum: currentPage.value,
			pageSize: pageSize.value,
			status : statusFilter.value
		}
		
		
		
		const res = await request('/admin/case/list', {
			method: 'GET',
			data: params
		})
		
		if (res.code === 200) {
			caseList.value = res.data || []
			totalCases.value = res.total || 0
		} else {
			uni.showToast({
				title: res.msg || '获取案例列表失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('获取案例列表失败', error)
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	} finally {
		isLoading.value = false
	}
}

// 切换案例状态
const toggleStatus = async (caseId, currentStatus) => {
	try {
		const newStatus = currentStatus === 'online' ? 'offline' : 'online'
		const res = await request('/admin/case/updateStatus', {
			method: 'POST',
			data: {
				id: caseId,
				status: newStatus
			}
		})
		
		if (res.code === 200) {
			uni.showToast({
				title: `${newStatus === 'online' ? '上线' : '下线'}成功`,
				icon: 'success'
			})
			// 重新加载当前页数据
			fetchCaseList()
		} else {
			uni.showToast({
				title: res.msg || '操作失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('更新案例状态失败', error)
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	}
}

// 上一页
const prevPage = () => {
	if (currentPage.value > 1) {
		currentPage.value--
		fetchCaseList()
	}
}

// 下一页
const nextPage = () => {
	if (currentPage.value < totalPages.value) {
		currentPage.value++
		fetchCaseList()
	}
}

// 查看案例详情
const viewCaseDetail = (caseId) => {
	uni.navigateTo({
		url: `/pages/admin/case-detail?id=${caseId}`
	})
}

// 编辑案例
const editCase = (caseId) => {
	uni.navigateTo({
		url: `/pages/admin/case-edit?id=${caseId}`
	})
}

// 新增案例
const goToAddCase = () => {
	uni.navigateTo({
		url: '/pages/admin/case-add'
	})
}

// 确认删除
const confirmDelete = (caseId) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这个案例吗？此操作不可恢复。',
		success: (res) => {
			if (res.confirm) {
				deleteCase(caseId)
			}
		}
	})
}

// 删除案例
const deleteCase = async (caseId) => {
	try {
		const res = await request('/admin/case/delete', {
			method: 'POST',
			data: caseId 
		})
		
		if (res.code === 200) {
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			})
			// 重新加载当前页数据
			fetchCaseList()
		} else {
			uni.showToast({
				title: res.msg || '删除失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('删除案例失败', error)
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	}
}

// 格式化日期
const formatDate = (dateString) => {
	if (!dateString) return '未知'
	const date = new Date(dateString)
	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 格式化价格
const formatPrice = (price) => {
	if (price === null || price === undefined) return '0'
	return price.toLocaleString()
}

// 页面加载时获取案例列表
onMounted(() => {
	fetchCaseList()
})
</script>

<style lang="scss" scoped>
.case-manage-container {
	min-height: 100vh;
	padding: 30rpx;
	background: linear-gradient(135deg, #18122B 0%, #120C1C 100%);
	color: #fff;
}

// 顶部操作栏
.action-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #A259FF;
}

.add-btn {
	display: flex;
	align-items: center;
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	color: #fff;
	padding: 15rpx 30rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: none;
}

.add-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
}

// 筛选栏
.filter-bar {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	padding: 20rpx 30rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	border: 1px solid #2D1457;
}

.filter-title {
	font-size: 28rpx;
	color: #B8B8D1;
	margin-right: 20rpx;
}

.filter-options {
	display: flex;
	gap: 20rpx;
}

.filter-option {
	padding: 10rpx 30rpx;
	border-radius: 30rpx;
	font-size: 26rpx;
	background: rgba(45, 20, 87, 0.3);
	color: #B8B8D1;
	border: 1px solid #2D1457;
	transition: all 0.3s;
	cursor: pointer;
}

.filter-option.active {
	background: rgba(123, 47, 242, 0.3);
	color: #fff;
	border-color: #7B2FF2;
}

// 案例网格
.case-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340rpx, 1fr));
	gap: 30rpx;
	margin-bottom: 40rpx;
}

.case-card {
	background: linear-gradient(135deg, #221A36 0%, #18122B 100%);
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx #7B2FF244;
	border: 1px solid #2D1457;
	transition: transform 0.2s;
}

.case-card:active {
	transform: scale(0.98);
}

.case-image-container {
	position: relative;
	height: 200rpx;
	overflow: hidden;
}

.case-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-price {
	position: absolute;
	bottom: 0;
	right: 0;
	background: linear-gradient(90deg, transparent, rgba(123, 47, 242, 0.8));
	color: #fff;
	padding: 6rpx 20rpx;
	font-size: 24rpx;
	border-top-left-radius: 12rpx;
}

.case-status {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
}

.status-online {
	background: rgba(39, 194, 129, 0.7);
	color: #fff;
}

.status-offline {
	background: rgba(255, 77, 79, 0.7);
	color: #fff;
}

.case-content {
	padding: 20rpx;
}

.case-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 10rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.case-intro {
	font-size: 26rpx;
	color: #B8B8D1;
	margin-bottom: 20rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 76rpx;
}

.case-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.case-time {
	font-size: 24rpx;
	color: #A259FF;
}

.case-actions {
	display: flex;
	gap: 10rpx;
}

.action-btn {
	padding: 6rpx 16rpx;
	border-radius: 8rpx;
	font-size: 24rpx;
}

.status-btn {
	background: rgba(123, 47, 242, 0.2);
	color: #A259FF;
}

.edit-btn {
	background: rgba(16, 174, 255, 0.2);
	color: #10AEFF;
}

.delete-btn {
	background: rgba(255, 77, 79, 0.2);
	color: #FF4D4F;
}

// 分页控件
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30rpx;
}

.page-btn {
	width: 80rpx;
	height: 80rpx;
	background: #221A36;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 20rpx;
	border: 1px solid #2D1457;
}

.page-btn.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.page-arrow {
	font-size: 32rpx;
	color: #A259FF;
}

.page-number {
	font-size: 28rpx;
	color: #B8B8D1;
}

// 空状态
.empty-state {
	grid-column: 1 / -1;
	padding: 80rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.empty-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
	color: #2D1457;
}

.empty-text {
	font-size: 28rpx;
	color: #B8B8D1;
	margin-bottom: 30rpx;
}

.empty-add-btn {
	background: linear-gradient(45deg, #7B2FF2, #10AEFF);
	color: #fff;
	padding: 15rpx 40rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: none;
}

// 加载状态
.loading-state {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(24, 18, 43, 0.7);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.loading-spinner {
	width: 80rpx;
	height: 80rpx;
	border: 6rpx solid #2D1457;
	border-top: 6rpx solid #A259FF;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #B8B8D1;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

// 响应式布局
@media screen and (max-width: 768px) {
	.case-grid {
		grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
	}
}
</style>
